<script>
    $(function(){
        update_abonnes();
        $( "#form_abonnes" ).dialog({
            autoOpen: false,
            resizable: false,
            height:500,
            width:550,
            modal: true
         });
    });
    
    function update_abonnes(){
        $.getJSON('app/ajax/ajax_abonnes.php?action=liste', function(data) {
            $("#liste_abonnes").html("<thead>"
                +"<tr>"
                +"<td>ID</td>"
                +"<td>Nom</td>"
                +"<td>Prénom</td>"
                +"<td>Email</td>"
                +"<td>Adresse</td>"
                +"<td>Date de naissance</td>"
                +"<td>Date d'inscription</td>"
                +"<td>Dernière visite</td>"
                +"<td>Actions</td>"
                +"</tr>"
                +"</thead>"
            );
            $.each(data, function(i, item) {
                $("#liste_abonnes").append(
                    "<tr>"
                    +"<td>"+item.IdAbonne+"</td>"
                    +"<td>"+item.Nom+"</td>"
                    +"<td>"+item.Prenom+"</td>"
                    +"<td>"+item.Email+"</td>"
                    +"<td>"+item.Adresse+"</td>"
                    +"<td>"+item.DateNaissance+"</td>"
                    +"<td>"+item.DateInscription+"</td>"
                    +"<td>"+item.LastVisit+"</td>"
                    +"<td><a class=\"btn\" onclick=\"modifier("+item.IdAbonne+", '"+escape(item.Nom)+"', '"+escape(item.Prenom)+"', '"+item.Email+"', '"+escape(item.Adresse)+"')\">Modifier</a></td>"
                    +"</tr>"
                );
            });
            $('#liste_abonnes').dataTable({
                "bDestroy": true,
                "oLanguage": {
                    "sLengthMenu": "Voir _MENU_ résultats par page",
                    "sZeroRecords": "Aucun résultat trouvé - Désolé",
                    "sInfo": "_START_ - _END_ sur _TOTAL_",
                    "sInfoEmpty": "Showing 0 to 0 of 0 records",
                    "sInfoFiltered": "(filtered from _MAX_ total records)",
                    "oPaginate": {
                        "sFirst": "Premier",
                        "sLast": "Dernier",
                        "sNext": "Suivant",
                        "sPrevious": "Précedent"
                    },
                    "sSearch": "Rechercher"
                }
            });
        });
        setTimeout(update_abonnes, 10000);
    }
    
    function modifier(id,nom,prenom,email,adresse){
        $("#formulaire_name").html("Modifier un abonné");
        $("#id").val(id);
        $("#nom").val(unescape(nom));
        $("#prenom").val(unescape(prenom));
        $("#adresse").val(unescape(adresse));
        $("#email").val(unescape(email));
        $("#form_abonnes").dialog('open');
        $("#button").html("<a class=\"btn\" onclick=\"validate_modifier()\">Modifier</a>");
    }
    
    function validate_modifier(){
        if($("#nom").val()==''||$("#prenom").val()==''||$("#adresse").val()==''||$("#email").val()==''){
            alert('Merci de renseigner tous les champs !');
            return;
        }
        var data = "action=modifier&id="+$("#id").val()+"&nom="+addslashes($("#nom").val())+"&prenom="+addslashes($("#prenom").val())+"&adresse="+addslashes($("#adresse").val())+"&email="+addslashes($("#email").val());
        ajax_abonnement(data);
    }
    
    function addslashes (str) {
        return (str + '').replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\\0');
    }
    
    function ajax_abonnement(data){
        $.ajax({
            type: 'GET',
            url: 'app/ajax/ajax_abonnes.php',
            data: data,
            success: function(result){
                $("#id").val('');
                $("#nom").val('');
                $("#prenom").val('');
                $("#adresse").val('');
                $("#email").val('');
                $("#form_abonnes").dialog('close');
                //alert(result.toString());
            }
        });
    }
</script>
<h1>Gestion des abonnés</h1>
<div id="form_abonnes">
    <h3 id="formulaire_name"></h3>
    <input type="hidden" id="id">
    <label>Nom</label><input type="text" id="nom" maxlength="30">
    <label>Prénom</label><input type="text" id="prenom" maxlength="30">
    <label>Adresse</label><textarea style="width: 480px" rows="3" cols="100" id="adresse"></textarea>
    <label>Email</label><input type="text" id="email" maxlength="150">
    <br />
    <span id="button"></span>
</div>
<table style="width: 100%" id="liste_abonnes"></table>